<template>
    <div class="manage">
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
            <!-- 用户的表单信息 -->
            <el-form :inline="true" :rules="rules" ref="form" :model="form" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input placeholder="请输入年龄" v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" placeholder="请选择">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期" prop="birth">
                    <el-date-picker
                    v-model="form.birth"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="地址" prop="addr">
                    <el-input placeholder="请输入地址" v-model="form.addr"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <div class="manage_header">
            <el-button type="primary" @click="addData">+添加</el-button>
            <!-- form搜索区域 -->
            <el-form :inline="true" :model="queryForm">
                <el-form-item>
                    <el-input v-model="queryForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        
        
        <el-table
        stripe
        height="90%"
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="name"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别">
                <template slot-scope="scope">
                    <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄">
            </el-table-column>
            <el-table-column
                prop="birth"
                label="出生日期">
            </el-table-column>
            <el-table-column
                prop="addr"
                label="地址">
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页内容 -->
        <div class="block">
        <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="handlePage">
        </el-pagination>
        </div>
    </div>
</template>

<script>
import {getUserDataApi, increaseUserDataApi, modifyUserDataApi, deleteUserDataApi} from "@/api"
  export default {
    data() {
      return {
        dialogVisible: false,
        form: {
            name: '',
            age: '',
            sex: '',
            birth: '',
            addr: '',
        },
        queryForm: {
            name: ''
        },
        rules: {
            name: [
                { required: true, message: '请输入姓名'}
            ],
            age: [
                { required: true, message: '请输入年龄'}
            ],
            sex: [
                { required: true, message: '请输入性别'}
            ],
            birth: [
                { required: true, message: '请输入日期'}
            ],
            addr: [
                { required: true, message: '请输入地址'}
            ],
        },
        tableData: [],
        modalType: 0, // 0表示新增弹窗，1表示编辑
        total: 0, // 分页总条数
        pageData: {
            page: 1,
            limit: 10
        }
      };
    },
    methods: {
        submit() {
            this.$refs.form.validate((valid) => { 
                // 校验通过valid返回true
                if(valid) {
                    // 后续对表单数据的处理
                    if(this.modalType === 0) {
                        increaseUserDataApi(this.form).then(() => {
                            this.getList();
                        })
                    } else {
                        modifyUserDataApi(this.form).then(() => {
                            this.getList();
                        })
                        
                    }
                    // 清空数据
                    this.$refs.form.resetFields();
                    // 关闭弹出框
                    this.dialogVisible = false;
                }
            })
        },
        handleClose() {
            // 清空数据
            this.$refs.form.resetFields();
            // 关闭弹出框
            this.dialogVisible = false;
        },
        handleEdit(row) {
            this.modalType = 1;
            this.dialogVisible = true;
            // 注意需要对当前行数据进行深拷贝，否则会出错
            this.form = JSON.parse(JSON.stringify(row));
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                deleteUserDataApi({id: row.id}).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 添加数据
        addData() {
            this.modalType = 0;
            // 打开弹出框
            this.dialogVisible = true;
        },
        // 获取列表数据
        getList() {
            getUserDataApi({params: {...this.pageData}}).then(({data}) => {
                console.log(data);
                this.tableData = data.list;
                this.total = data.count || 0
            })
        },
        // 修改页码
        handlePage(val) {
            console.log('val', val);
            this.pageData.page = val;
            this.getList();
        },
        // 表单查询
        onSubmit() {
            // 只能查第一页的是因为，分页导致的，点击查询会更新页数到第一页。所以只能展示第一页的数据，即使查到了
            getUserDataApi({params: this.queryForm}).then(({data}) => {
                this.tableData = data.list;
            })
        }
    },
    mounted() {
        this.getList();
    }
  };
</script>
 
<style lang = "less" scoped>
    .manage {
        height: 90%;
        .manage_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .el-pagination {
            float: right;
        }
    }
</style>